<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>04 v-on指令</title>
	</head>

	<body>
		<div id="app">
			<!-- 完整写法 v-on:方法 -->
			<input type="button" value="点击背景变绿色" v-on:click="greedClick">
			<!-- 简写 @方法 -->
			<input type="button" value="鼠标移动到上面还原" @mouseenter="mouwat">
			<h1 @click="chanFood">{{food}}</h1>
		</div>
		<script src="./vue-v2.7.13.js"></script>

		<script>
			//v-on指令 作用是为元素绑定事件
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				//输出的数据
				data: {
					food: "点击我",
					qq: "方法function 里的 this 可以访问 到 data 的数据"
				},
				//对象 方法
				methods: {
					greedClick: (e) => {
						//$("body").css('background','white')
						document.body.style.background = "green"
					},
					mouwat: function() {
						document.body.style.background = "white"
						this.food = "点击我"
					},
					chanFood: function() {
						this.food = this.qq
						console.log(this)
					}
				}
			})
		</script>

	</body>

</html>
